// 定位 palyer 总体信息
.player {
    //定位采取固定定位fixed
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 60px;
    background-color: rgb(56, 66, 69);
    z-index: 104;
    cursor: pointer;
    user-select: none;
    //   overflow: hidden;
}

// 播放控件内容区开始
.music-container {
    margin: 0px auto;
    height: 100%;
    width: 1100px;
    //   background-color: cornflowerblue;
}

.mc-controller {
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: #384245;
    z-index: 105 !important;
    /*
  * 播放器控件左侧
  * flex: 放大(0: 默认不放大) 缩小(1: 默认值，等比缩小) 宽度
  */
    .mc-controller-left {
        flex: 0 0 25%;
        height: 100%;
        // background-color: cornsilk;
        display: inline-flex;
        justify-content: flex-start;
        vertical-align: center;
        align-items: center;
        color: black;
        // 按钮公共样式
        .mc-button {
            height: 30px;
            padding: 15px 0px;
            i {
                font-size: 30px;
            }
        }
        // 歌手头像
        .mc-cover {
            width: 60px;
            height: 60px;
            margin-left: 20px;
            //   background-color: blue;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .mc-button-skipback {
            margin-left: 30px;
        }
        .mc-button-skippause {
            margin: 0px 11px;
        }
        .mc-button-skipforword {
            margin-right: 30px;
        }
    }
    // 播放器控件左侧结束
    // 播放器控件中间开始
    .mc-controller-center {
        flex: 0 0 45%;
        // background-color: darkorchid;
        // overflow: hidden;
        z-index: 105;
        // 采用列排列
        display: flex;
        flex-direction: column;
        background-color: #384245;
        padding: 10px 20px;
        // 歌手歌曲信息
        .mc-song-msg {
            display: inline-flex;
            justify-content: space-between;
            margin-bottom: 2px;
            align-content: flex-end;
            font-size: 16px;
            color: #737a7c;
            .mc-songName {
                text-overflow: ellipsis;
                -ms-text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 120px;
            }
            .mc-songer {
                font-size: 12px;
            }
            .mc-time {
                // margin-right: 10px;
                font-size: 14px;
                color: white;
            }
        }
        // 播放进度条
        .mc-progress {
            height: 20px;
            //   background-color: black;
            display: flex;
            align-items: center;
            padding-left: 2px;
            .mc-line {
                height: 3px;
                flex: 1;
                //设置相对定位
                position: relative;
                background-color: #909090;
                border-radius: 1px;
                .mc-currentline {
                    height: 3px;
                    background-color: #32b0da;
                    width: 0;
                }
                //进度控件按钮
                .mc-button {
                    // position: absolute;
                    // left: -6px;
                    // bottom: -9.5px;
                    // border-radius: 50%;
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    left: 0px;
                    bottom: -6px;
                    border-radius: 50%;
                    background-color: #32b0da;
                    // i {
                    //   font-size: 20px;
                    //   color: whitesmoke;
                    // }
                }
            }
        }
    }
    // 播放器控件中间结束
    .mc-controller-right {
        flex: 0 0 30%;
        // background-color: deeppink;
        background-color: #384245;
        display: inline-flex;
        // justify-content: center;
        z-index: 105;
        // 竖线
        .mc-line {
            height: 60px;
            width: 10px;
            padding: 0px 10px;
            .line {
                height: 30px;
                margin: 15px auto;
                width: 0px;
                background-color: #737a7c;
                border: 1px solid #737a7c;
            }
        }
        // 音量按钮
        .mc-volume {
            height: 22px;
            padding: 19px 10px 19px 0px;
            i {
                font-size: 22px;
                color: black;
            }
        }
        // 音量进度条
        .mc-volume-line {
            width: 86px;
            height: 60px;
            // background-color: yellow;
            display: flex;
            align-items: center;
            margin-left: 10px;
            .volume-line {
                width: 100%;
                height: 3px;
                border-radius: 1px;
                background-color: #909090;
                position: relative;
                // 当前音量长度
                .volume-current {
                    width: 0;
                    height: 3px;
                    background-color: #32b0da;
                }
                .volume-button {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    left: 0px;
                    bottom: -6px;
                    border-radius: 50%;
                    background-color: #32b0da;
                }
            }
        }
        // 循环播放控件
        .mc-order {
            height: 22px;
            width: 40px;
            padding: 19px 10px;
            i {
                font-size: 22px;
                color: black;
            }
        }
        .mc-button-playlists {
            height: 28px;
            box-sizing: border-box;
            width: 60px;
            margin: 16px 10px;
            border-radius: 20px;
            background-color: #737a7c;
            i {
                font-size: 22px;
            }
            span {
                padding: 0px 3px;
                font-size: 13px;
                color: white;
            }
        }
    }
}

// 播放控件内容结束
// 播放列表开始
.music-container {
    //  设置相对定位是方便播放列表的定位
    position: relative;
    .ps {
        /*overflow: hidden !important;*/
        overflow-y: scroll;
        overflow-anchor: none;
        -ms-overflow-style: none;
        touch-action: auto;
        -ms-touch-action: auto;
    }
    .mc-playlists {
        position: absolute;
        background-color: rgb(56, 66, 69);
        color: rgba(255, 255, 255, 0.4);
        width: 620px;
        right: 0px;
        bottom: 60px;
        transform-origin: 0 100%;
        border-radius: 6px 6px 0px 0px;
        font-weight: lighter;
        transition: 0.3s;
        // overflow: hidden;
        // 播放列表头部
        .mc-playlists-header {
            padding: 16px 20px 16px 20px;
            cursor: default;
            display: flex;
            cursor: default;
            justify-content: space-between;
            margin-bottom: 0px;
            //   padding-bottom: 0px;
            .playlists-right {
                flex: 1;
                display: inline-flex;
                justify-content: flex-end;
                align-items: center;
                vertical-align: center;
                .playlists-songer {
                    margin-right: 30px;
                }
                .playlists-close {
                    font-size: 12px;
                    cursor: pointer;
                }
            }
        }
        // 播放列表主体歌曲部分
        .mc-playlists-body {
            width: 100%;
            height: 280px;
            background-color: #455155;
            //   background-color: aquamarine;
            .mc-playlists-line {
                display: flex;
                justify-content: space-between;
            }
            .mc-playlists-line:hover {
                background: #425961;
                color: #50c9da;
            }
            //   活动列表的属性
            .mc-playlists-line.active {
                background: #425961;
                color: #32b0da;
            }
            ol {
                list-style: none;
                padding: 0px;
                margin: 0px;
                li {
                    padding: 10px 50px 10px 20px;
                    transition: 0.2s;
                    cursor: pointer;
                    line-height: 21px;
                }
            }
        }
    }
    // 播放列表显示隐藏类
    .mc-playlists-hide {
        // display: none;
        // opacity: 0;
        // z-index: -100;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}


/*提示区*/

.music-container .mc-toast {
    position: absolute;
    bottom: 72px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    color: #fff;
    opacity: 1;
    pointer-events: none;
    transition: 0.3s;
}

.music-container .mc-toast-hide {
    opacity: 0;
    -webkit-transform: translate(-50%, 12px);
    transform: translate(-50%, 12px);
}